<template>
    <div v-for="(category1, index) in treeData" :key="category1.id">
        <!-- 进口生鲜 -->
        <div class="i_t mar_10">
            <span class="floor_num">{{ index + 1 }}F</span>
            <span class="fl">{{ category1.name }}</span>
        </div>
        <div class="content">
            <div class="fresh_left">
                <div class="fre_ban">
                    <div id="imgPlay1">
                        <ul class="imgs" id="actor1">
                            <li>
                                <a href="#">
                                    <img src="/images/fre_r.jpg" width="211" height="286" />
                                </a>
                            </li>
                        </ul>
                        <!-- <div class="prevf">上一张</div>
                        <div class="nextf">下一张</div> -->
                    </div>
                </div>
                <div class="fresh_txt">
                    <div class="fresh_txt_c">
                        <span v-for="(category2, index2) in category1.children" :key="category2.id">
                            <a @click.prevent="toCategory(category2.id)">{{ category2.name }}</a></span>
                    </div>
                </div>
            </div>
            <div class="fresh_mid" >
                <ul v-for="(product, index) in ProductByC1[category1.id]" :key="product.id">
                    <li>
                        <a href="#" @click.prevent="toProductDetail(product.id)">
                            <div class="name">{{ product.name }}</div>
                            <div class="price">
                                <span>￥<span>{{ product.price }}</span></span> &nbsp;
                                <!-- <span  style="font-size: small;">库存：{{ product.stock }}</span> -->
                            </div>
                            <div class="img">
                                <img :src="url + product.fileName" width="185" height="155" />
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="fresh_right">
                <ul>
                    <li>
                        <a href="#"><img src="/images/fre_b1.jpg" width="260" height="220" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="/images/fre_b2.jpg" width="260" height="220" /></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()

const url = "http://192.168.12.159:83/"

const treeData = ref([]);
const ProductByC1 = ref({})


const getCategoryTree = async () => {
    try {
        const response = await axios.get('/api/categoryTree');
        treeData.value = response.data.categoryTree;

        // 获取每个分类的商品数据
        getAllProduct();
    } catch (error) {
        console.error('获取分类数据失败:', error);
    }
}


const getAllProduct = async () => {
    for (let i = 0; i < treeData.value.length; i++) {
        await getProductByCategory(treeData.value[i].id);
    }
}

// 根据分类ID获取商品数据
const getProductByCategory = async (categoryId) => {
    try {
        const response = await axios.get('/api/proListByC', {
            params: {
                pageNum: 1,
                pageSize: 6,
                categoryId: categoryId,
            }
        });


        ProductByC1.value[categoryId] = response.data.pageInfo.list;
    } catch (error) {
        console.error(`获取分类 ${categoryId} 的商品数据失败:`, error);
        ProductByC1.value[categoryId] = [];
    }
}


//详细
function toProductDetail(id) {
    router.push({
        path: '/productDetail',
        query: {
            id: id
        }
    })
}

//分类
const toCategory = (id) => {
    router.push({ path: '/searchProduct', query: { id: id } })
}

onMounted(() => {
    getCategoryTree()
})

</script>

<style></style>